/* components */
import BizTable from '@src/component/business/BizTable/BizTable'
import SettingListPagination from "@src/modules/setting/gpt/components/pagination";
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* hooks */
import { useSettingListPage, useSettingListTable } from "@src/modules/setting/gpt/hooks";
/* model */
import Page from "@model/Page";
/* vue */
import { defineComponent, PropType } from "vue";
/* types */
import Column from "@model/types/Column";
/* util */
import { isEmpty, isNotEmpty } from "@src/util/type";
import { isFalsy, uuid } from 'pub-bbx-utils';

type BizTableComponentType = Record<string, any>;

type BaseListTableProps = {
  columns: Column[];
  data: Record<string, any>[];
}

export default defineComponent({
  name: ComponentNameEnum.SettingTableView,
  props: {
    columns: {
      type: Array as PropType<Column[]>,
      default: () => []
    },
    data: {
      type: Array as PropType<Record<string, any>[]>,
      default: () => []
    },
    multipleSelection: {
      type: Array as PropType<Record<string, any>[]>,
      default: () => []
    },
    page: {
      type: Object as PropType<Page>,
      default: () => ({})
    },
    showTableSelection: {
      type: Boolean,
      default: true
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    isManualGetSelection: {
      type: Boolean,
      default: false
    },
    onChangeSelection: {
      type: Function
    },
    onChangePageSize: {
      type: Function
    },
    onChangePageNum: {
      type: Function
    }
  },
  setup(props: BaseListTableProps, { emit }) {
    
    const { handleSelectionChange, handlerSortChange, clearMultipleSelection } = useSettingListTable(emit)
    const { handlerPageNumChange, handlerPageSizeChange } = useSettingListPage(emit)
    
    return {
      handleSelectionChange,
      handlerSortChange,
      handlerPageNumChange,
      handlerPageSizeChange,
      clearMultipleSelection
    }
    
  },
  data() {
    return {
      tableHeight: 0,
      tableKey: uuid()
    }
  },
  computed: {
    selectedNum(): number {
      return this.multipleSelection.length;
    },
    pageSize(): number {
      return this.page.pageSize;
    },
    pageNum(): number {
      return this.page.pageNum;
    },
    total(): number {
      return this.page.total;
    },
    bizTableComponent(): BizTableComponentType {
      return this.$refs.BizTable as BizTableComponentType || {};
    }
  },
  watch: {
    multipleSelection: {
      handler(newValue: Record<string, any>[], oldValue: Record<string, any>[]) {
        
        if (isEmpty(newValue) && isNotEmpty(oldValue)) {
          this.clearMultipleSelection()
          this.clearSelection()
        }
        
      }
    }
  },
  methods: {
    clearSelection() {
      return this.bizTableComponent.outsideClearSelection()
    },
    getSelection(): Record<string, any>[] {
      return this.bizTableComponent.outsideGetSelection()
    },
    onChangeSelectionHandler(selection: Record<string, any>[]) {
      this.handleSelectionChange(selection)
    },
    renderPagination() {
      
      if (isFalsy(this.showPagination)) {
        return null
      }
      
      return (
        <SettingListPagination
          selectedNum={ this.selectedNum }
          pageNum={ this.pageNum }
          pageSize={ this.pageSize }
          total={ this.total }
          onChangeSelection={this.handleSelectionChange}
          onChangePageNum={ this.handlerPageNumChange }
          onChangePageSize={ this.handlerPageSizeChange }
        >
        </SettingListPagination>
      )
    },
    renderEmpty() {
      
      if (this.$slots.empty) {
        return (
          <div slot="empty">
            { this.$slots.empty }
          </div>
        )
      }
      
      return null
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingTableView}>
        
        <BizTable
          ref="BizTable"
          key={ this.tableKey }
          columns={ this.columns }
          data={ this.data }
          isManualGetSelection={ this.isManualGetSelection }
          showTableSelection={ this.showTableSelection }
          onChangeSelection={ this.onChangeSelectionHandler }
          onSortChanged={ this.handlerSortChange }
        >
          {this.renderEmpty()}
        </BizTable>
        
        { this.renderPagination() }
        
      </div>
    )
  }
})